<template>
  <div class="ar-map-layer-content">
    <div ref="maplabel" id="maplabel"></div>
  </div>
</template>
  
  <script setup>
import "ol/ol.css";
import { ref, onMounted, defineComponent, defineEmits } from "vue";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Feature from "ol/Feature";
import { LineString, Point, Polygon } from "ol/geom";
import { Icon, Style, Stroke, Circle, Fill, Text } from "ol/style";
import Overlay from "ol/Overlay.js";
import { Image as ImageLayer } from "ol/layer.js";
import ImageWMS from "ol/source/ImageWMS.js";
import VectorTileSource from "ol/source/VectorTile";
import VectorTileLayer from "ol/layer/VectorTile";
import MVT from "ol/format/MVT";
import { defaults } from "ol/interaction/defaults";
import PointerInteraction from "ol/interaction/Pointer";
import DragPan from "ol/interaction/DragPan";
const maplabel = ref(null);
const animating = ref(false);
let map;

onMounted(async () => {
  map = new Map({
    layers: [
      new ImageLayer({
        source: new ImageWMS({
          url: "http://192.168.99.186:8080/geoserver/wms",
          params: { LAYERS: "tjxgblack", VERSION: "1.1.0" },
          ratio: 1,
          serverType: "geoserver",
        }),
      }),
    ],
    target: maplabel.value,
    view: new View({
      center: [117.74256851451989, 39.00380206757584],
      projection: "EPSG:4326",
      minZoom: 4,
      zoom: 11.7,
    }),
    interactions: defaults({
      doubleClickZoom: true,
    }),
  });
  // 监听地图的postrender事件
  map.once("postrender", (event) => {});
  // 地图注册点击事件
  map.on("click", (event) => {});
});

const getView = () => {
  let view = map.getView();
  let center = view.getCenter();
  console.log(center);
  console.log(view);
  center[0] = center[0] - 1;
  center[1] = center[1] - 1;
  view.setCenter(center);
  map.render();

  view.animate({
    center: [114.28, 34.54],
    zoom: 7,
    duration: 1000,
  });

  // 获取图层方法:等等
  // map.getLayers().item[1].getSource().on('click')
};

const setPolyon = () => {
  // 创建一个多边形要素的数据集，假设每个多边形有一个高度属性
  var features = [
    new Feature({
      geometry: new Polygon([
        [
          [117.69513238288741, 39.015957906515624],
          [117.69335591431309, 39.013219184130215],
          [117.69772306622495, 39.01114663746018],
          [117.69986963241892, 39.01462555508489],
        ],
      ]),
      height: 20,
    }),
    new Feature({
      geometry: new Polygon([
        [
          [117.69513238288741, 39.015957906515624],
          [117.69335591431309, 39.013219184130215],
          [117.69772306622495, 39.01114663746018],
          [117.69986963241892, 39.01462555508489],
        ],
      ]),
      height: 10,
    }),
  ];

  // 创建样式函数，根据每个面数据的高度进行样式设置
  var styleFunction = function (feature) {
   
    var height = feature.get("height"); // 获取每个面数据的高度
    var color = height > 15 ? "rgba(255, 0, 0, 0.8)" : "rgba(0, 0, 255, 0.8)";

    return new Style({
      fill: new Fill({
        color: color,
      }),
      stroke: Stroke({
        color: "black",
        width: 2,
      }),
    });
  };

  // 创建 VectorSource 和 VectorLayer
  var vectorSource = new VectorSource({
    features: features,
  });
  var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: function (feature) {
      console.log(feature);
      // 获取要素的属性
      var height = feature.get("height");

      // 根据属性值返回不同的样式
      var color = height > 15 ? "rgba(255, 0, 0, 0.8)" : "rgba(0, 0, 255, 0.8)";

      return new ol.style.Style({
        fill: new ol.style.Fill({
          color: color, // 填充颜色根据高度变化
        }),
        stroke: new ol.style.Stroke({
          color: "black",
          width: 2,
        }),
      });
    },
  });

  // 添加 VectorLayer 到地图
  map.addLayer(vectorLayer);
  map.render();
};
</script>
  
<style lang="scss" scoped>
.ar-map-layer-content {
  width: 100%;
  height: 100%;
  padding: 10px 0;
  #maplabel {
    width: 100%;
    height: 100%;
  }
}
</style>










  